.btn {
  @background-color: transparent;

  .button(@color, @inverse-color) {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    padding: 8px 16px;
    box-sizing: border-box;
    border-radius: 3px;
    background-clip: padding-box;
    white-space: nowrap;
    transition: background-color 0.2s;
    color: @color;
    border: 1px solid @color;
    background-color: @background-color;

    &:hover {
      color: darken(@color, 10%);
    }

    &.active {
      color: @inverse-color;
      border: 1px solid @color;
      background-color: @color;

      &:hover {
        color: @inverse-color;
      }
    }
  } // .button()

  &.btn-h-gray {
    .button(#F2F2F2, #66738D);
  }
}
